<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Meeting Review</title>
    <link rel="stylesheet" type="text/css" href="css/review.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.4.custom.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/scripts/contentflow.css" media="screen" />
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.hotkeys-0.7.9.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript" src="scripts/contentflow.js"></script>

    <script type="text/javascript">

        $(function() {
            var myNewFlow = new ContentFlow('ContentFlow',
            {  circularFlow: false,
                startItem : "left" ,
                onReachTarget: function(item) {
                    var topicId = findTopicId(item);
                    showTimesForTopicId(topicId);
                }
            } ) ;

            function findTopicId(item) {
                return $(item.item).find(".innerContent").text().replace(/ /g,"_");;
            }

            function getTotalMeetingTime() {
                return 1000;
            }

            function getTimesForTopicId(topicId) {
                if ('Investor_Agreements' == topicId) {
                    return [[120,150],[200,300]];
                }
                if ('Corporate_Structure' == topicId) {
                    return [[150,200],[300,600]];
                }
                if ('Company_Name' == topicId) {
                    return [[600,1000]];
                }
                if ('Share_Structure' == topicId) {
                    return [[0,100],[200,300],[400,500],[600,700],[800,900]];
                }
            }


            function showTimesForTopicId(topicId) {
                $('#timebar').empty();
                var times = getTimesForTopicId(topicId);
                if (!times) return;
                var pps = calculatePixelsPerSecond($('#timebar').width(), getTotalMeetingTime() );
                var lastRightEdge = 0;
                $.each(times, function(i, time) {
                    var start = time[0];
                    var duration = time[1] - time[0];

                    var startMargin = calculateSecondsPixelSize(start, pps) - calculateSecondsPixelSize(lastRightEdge,pps);


                    var width = calculateSecondsPixelSize(duration, pps);
                    var timebarSection = $('<div class="timebarSection"></div>').css({'width' : width + 'px', 'margin-left': startMargin + 'px'});
                    $('#timebar').append(timebarSection);
                    timebarSection.effect("highlight", {}, 2000);;
                    lastRightEdge = time[1];
                });
            }

            function calculatePixelsPerSecond (divWidth, audioDuration) {
                return divWidth / (audioDuration);
            }
            function calculateSecondsPixelSize(seconds, pps) {
                var result =  Math.round(seconds * pps);
                if (!result) return 1;
                return result;
            }


        });
    </script>

</head>
<body >
        <div id="ContentFlow">
            <div class="loadIndicator"><div class="indicator"></div></div>
            <div class="flow" style="height: 250px;">

                <div class="item">
                    <img class="content" src="pics/idea-flow.png" />
                    <div class="contentText">
                        <div class="innerContent">
                            Investor Agreements
                        </div>
                    </div>
                    <div class="caption">More work required</div>
                </div>
                <div class="item">
                    <img class="content" src="pics/world.png" />
                    <div class="contentText">
                        <div class="innerContent">Corporate Structure</div>
                    </div>
                    <div class="caption">More work required</div>
                </div>
                <div class="item">
                    <img class="content" src="pics/reminder-flow.png" />
                    <div class="contentText">
                        <div class="innerContent">Company Name</div>
                    </div>
                    <div class="caption">Pending</div>
                </div>
                <div class="item">
                    <img class="content" src="pics/heart-flow.png" />
                    <div class="contentText">
                        <div class="innerContent">Share Structure</div>
                    </div>
                    <div class="caption">Decided</div>
                </div>
                <div class="item">
                    <img class="content" src="pics/search-flow.png" />
                    <div class="contentText">
                        <div class="innerContent">Patent Research</div>
                    </div>
                    <div class="caption">Approved</div>
                </div>
                <div class="item">
                    <img class="content" src="pics/pic3.png" />
                    <div class="contentText">
                        <div class="innerContent">Randy Joins Team</div>
                    </div>
                    <div class="caption">Approved</div>
                </div>
                <!-- Add as many items as you like. -->
            </div>
            <div class="globalCaption"></div>
            <div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
        </div>


        <div id="timebar"></div>    


</body>
</html>